<!-- 17736363636  Hwp20pro! -->
<template>
  <div>
    <Nav1></Nav1>
    <div class="logo">
      <img src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="" />
    </div>
    <van-form @submit="onSubmit" label-width="1.71rem" label-align="right" class="form">
      <van-field
        v-model="phone"
        name="手机号"
        label="手机号:"
        placeholder="请输入手机号"
        :rules="[{ required: true, pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '请输入11位手机号' }]"
      />
      <van-field
        v-model="code"
        name="验证码"
        center
        label="验证码:"
        placeholder="请输入六位数字验证码"
        :rules="[{ required: true, pattern: /^\d{6}$/ }]"
      >
        <template #button>
          <van-button size="small" type="default" native-type="button" @click="getCode">获取验证码</van-button>
        </template>
      </van-field>
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入登录密码"
        :rules="[
          {
            required: true,
            pattern: /^(?![A-Za-z0-9]+$)(?![a-z0-9#?!@$%^&*-.]+$)(?![A-Za-z#?!@$%^&*-.]+$)(?![A-Z0-9#?!@$%^&*-.]+$)[a-zA-Z0-9#?!@$%^&*-.]{8,16}$/,
            message: '请输入8-16位含大小写字母,数字,及?!@$%*--.密码',
          },
        ]"
      />
      <van-field
        v-model="password1"
        type="password"
        name="确认密码"
        label="确认密码"
        placeholder="请再次输入密码"
        :rules="[{ required: true, validator, message: '俩次密码输入不一致' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="danger" native-type="submit" class="login">注册</van-button>
      </div>
    </van-form>
    <router-link to="/login"><div class="qt">已有账号,去登录></div></router-link>
  </div>
</template>
<script>

import { Form, Field, Button, Notify } from "vant";
import { mapState } from "vuex";
import Nav1 from '@/components/nav1/index.vue';
export default {
  // 组件名字
  name: "Register",
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Notify.Component.name]: Notify.Component,

    Nav1
},
  // 状态数据
  data() {
    return {
      phone: "",
      code: "",
      password: "",
      password1: "",
    };
  },
  methods: {
    // 表单提交回调 -- 注册
    async onSubmit() {
      try {
        await this.$store.dispatch("user/userRegister", {
          phone: this.phone,
          password: this.password,
          code: this.code,
        });
        this.$router.push({ path: "/person/login" });
      } catch (error) {
        alert(error);
      }
    },
    // 获取验证码
    async getCode() {
      try {
        await this.$store.dispatch("user/getCode", this.phone);
        this.code = this.userCode;
      } catch (error) {
        Notify({ type: "warning", message: "获取验证码失败" });
      }
    },
    // 确认密码表单验证
    validator(val) {
      return val == this.password;
    },
  },
  computed: {
    ...mapState({
      userCode: (state) => state.user.code,
    }),
  },
};
</script>
<style lang="less" scoped>
.logo {
  display: flex;
  flex-direction: column;
  img {
    display: block;
    margin: 0.7467rem auto;
    width: 3.5733rem;
    height: 1.2rem;
  }
}
.login {
  background-color: #dd1a21;
  font-size: 0.48rem;
  width: 8.9333rem;
  height: 1.2267rem;
  border-radius: 0.1333rem;
}
.qt {
  margin-top: 2rem;
  font-size: 0.4rem;
  text-align: center;
}
</style>
